<!DOCTYPE html>
<html style="height: 100%; font-size: 14px">
    <head>
        <meta name="spreadjs culture" content="zh-cn" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="./vendor/spread-sheets/styles/gc.spread.sheets.excel2013white.css" />
        <script src="./vendor/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
        <script src="./vendor/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
        <script src="./vendor/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>

        <script src="./vendor/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
        <script src="./vendor/spread/source/js/license.js" type="text/javascript"></script>
        <script src="./vendor/spread/source/data/customPrint.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
            var xhr = new XMLHttpRequest();
            // xhr.open('GET', './久其封面1.ssjson', true);
            xhr.open('GET', './zhengque.json', true);
            // xhr.open('GET', './封面久其111.json', true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                var jsonData = JSON.parse(xhr.responseText);
                // 同样处理JSON数据并生成HTML内容
                // ...
                if (typeof jsonData === 'string') {
                    window.jsonData11 = JSON.parse(jsonData)
                } else {
                    window.jsonData11 = jsonData
                }
                } else {
                console.error('Error loading JSON data.');
                }
            };
            xhr.send();
    });
        </script>
    </head>
    <body>
        <div class="sample-tutorial">
            <div id="ss" class="sample-spreadsheets"></div>
            <div class="options-container">
                <div class="container">
                    <div class="row">
                        <span
                            >Change these options and scroll down to click the "Set PrintInfo" button to set these options in the PrintInfo for the Spread component. Click the "Print" button to see how these settings affect how the workbook is
                            printed.</span
                        >

                        <hr style="border: 1px solid white; border-bottom-color: lightgray" />
                        <div class="group">
                            <label>
                                <input type="checkbox" id="displayPrintLine" />
                                PrintLineVisible
                            </label>
                        </div>
                    </div>
                    <div class="row title">
                        <span>Print Region</span>
                    </div>
                    <div class="row hidden">
                        <div class="group">
                            <label>RowStart:</label>
                            <input id="rowStart" />
                        </div>
                        <div class="group">
                            <label>RowEnd:</label>
                            <input id="rowEnd" />
                        </div>
                        <div class="group">
                            <label>ColumnStart:</label>
                            <input id="columnStart" />
                        </div>
                        <div class="group">
                            <label>ColumnEnd:</label>
                            <input id="columnEnd" />
                        </div>
                    </div>

                    <div class="row title">
                        <span>Repeat</span>
                    </div>
                    <div class="row hidden">
                        <div class="group">
                            <label>RepeatRowStart:</label>
                            <input id="repeatRowStart" />
                        </div>
                        <div class="group">
                            <label>RepeatRowEnd:</label>
                            <input id="repeatRowEnd" />
                        </div>
                        <div class="group">
                            <label>RepeatColumnStart:</label>
                            <input id="repeatColumnStart" />
                        </div>
                        <div class="group">
                            <label>RepeatColumnEnd:</label>
                            <input id="repeatColumnEnd" />
                        </div>
                    </div>

                    <div class="row title">
                        <span>Print Options</span>
                    </div>
                    <div class="row hidden">
                        <div class="group">
                            <label>
                                <input type="checkbox" id="showBorder" />
                                ShowBorder
                            </label>
                        </div>
                        <div class="group">
                            <label>
                                <input type="checkbox" id="showGridLine" />
                                ShowGridLine
                            </label>
                        </div>
                        <div class="group">
                            <label>打印方向:</label>
                            <select id="orientation">
                                <option value="1">纵向打印</option>
                                <option value="2">横向打印</option>
                            </select>
                        </div>
                        <div class="group">
                            <label>打印顺序:</label>
                            <select id="pageOrder">
                                <option value="0">自动确认</option>
                                <option value="1">先行后列</option>
                                <option value="2">先列后行</option>
                            </select>
                        </div>
                        <div class="group">
                            <label>ShowRowHeader:</label>
                            <select id="showRowHeader">
                                <option value="0">Inherit</option>
                                <option value="1">Hide</option>
                                <option value="2">Show</option>
                                <option value="3">ShowOnce</option>
                            </select>
                        </div>
                        <div class="group">
                            <label>ShowColumnHeader:</label>
                            <select id="showColumnHeader">
                                <option value="0">Inherit</option>
                                <option value="1">Hide</option>
                                <option value="2">Show</option>
                                <option value="3">ShowOnce</option>
                            </select>
                        </div>
                    </div>

                    <div class="row title">
                        <span>Header/Footer</span>
                    </div>
                    <div class="row hidden">
                        <div class="group">
                            <label>Select A Type Of Header/Footer:</label>
                            <select id="selectTypeHeaderFooter">
                                <option value="0">Normal</option>
                                <option value="1">First</option>
                                <option value="2">Odd</option>
                                <option value="3">Even</option>
                            </select>
                        </div>
                        <div class="group differentFirstPage hidden">
                            <label>
                                <input type="checkbox" id="differentFirstPage" />
                                Enable Different First Page
                            </label>
                        </div>
                        <div class="group differentOddAndEvenPages hidden">
                            <label>
                                <input type="checkbox" id="differentOddAndEvenPages" />
                                Enable Different Odd And Even Pages
                            </label>
                        </div>
                        <div class="group headfooter">
                            <div class="row title">
                                <span>Header</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>HeaderLeft:</label>
                                    <input id="headerLeft" />
                                </div>
                                <div class="group">
                                    <label>HeaderLeftImage:</label>
                                    <select id="headerLeftImage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg" selected>Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>HeaderCenter:</label>
                                    <input id="headerCenter" />
                                </div>
                                <div class="group">
                                    <label>HeaderCenterImage:</label>
                                    <select id="headerCenterImage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>HeaderRight:</label>
                                    <input type="text" id="headerRight" />
                                </div>
                                <div class="group">
                                    <label>HeaderRightImage:</label>
                                    <select id="headerRightImage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row title">
                                <span>Footer</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>FooterLeft:</label>
                                    <input id="footerLeft" />
                                </div>
                                <div class="group">
                                    <label>FooterLeftImage:</label>
                                    <select id="footerLeftImage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>FooterCenter:</label>
                                    <input id="footerCenter" />
                                </div>
                                <div class="group">
                                    <label>FooterCenterImage:</label>
                                    <select id="footerCenterImage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>FooterRight:</label>
                                    <input type="text" id="footerRight" />
                                </div>
                                <div class="group">
                                    <label>FooterRightImage:</label>
                                    <select id="footerRightImage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="group headfooter hidden">
                            <div class="row title">
                                <span>Header</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>Header Left Of First Page:</label>
                                    <input id="headerLeftOfFirstPage" />
                                </div>
                                <div class="group">
                                    <label>Header Left Image Of First Page:</label>
                                    <select id="headerLeftImageOfFirstPage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Header Center Of First Page:</label>
                                    <input id="headerCenterOfFirstPage" />
                                </div>
                                <div class="group">
                                    <label>Header Center Image Of First Page:</label>
                                    <select id="headerCenterImageOfFirstPage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Header Right Of First Page:</label>
                                    <input type="text" id="headerRightOfFirstPage" />
                                </div>
                                <div class="group">
                                    <label>Header Right Image Of First Page:</label>
                                    <select id="headerRightImageOfFirstPage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row title">
                                <span>Footer</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>Footer Left Of First Page:</label>
                                    <input id="footerLeftOfFirstPage" />
                                </div>
                                <div class="group">
                                    <label>Footer Left Image Of First Page:</label>
                                    <select id="footerLeftImageOfFirstPage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Footer Center Of First Page:</label>
                                    <input id="footerCenterOfFirstPage" />
                                </div>
                                <div class="group">
                                    <label>Footer Center Image Of First Page:</label>
                                    <select id="footerCenterImageOfFirstPage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Footer Right Of First Page:</label>
                                    <input type="text" id="footerRightOfFirstPage" />
                                </div>
                                <div class="group">
                                    <label>Footer Right Image Of First Page:</label>
                                    <select id="footerRightImageOfFirstPage">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="group headfooter hidden">
                            <div class="row title">
                                <span>Header</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>Header Left Of Odd Pages:</label>
                                    <input id="headerLeftOfOddPages" />
                                </div>
                                <div class="group">
                                    <label>Header Left Image Of Odd Pages:</label>
                                    <select id="headerLeftImageOfOddPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Header Center Of Odd Pages:</label>
                                    <input id="headerCenterOfOddPages" />
                                </div>
                                <div class="group">
                                    <label>Header Center Image Of Odd Pages:</label>
                                    <select id="headerCenterImageOfOddPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Header Right Of Odd Pages:</label>
                                    <input type="text" id="headerRightOfOddPages" />
                                </div>
                                <div class="group">
                                    <label>Header Right Image Of Odd Pages:</label>
                                    <select id="headerRightImageOfOddPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row title">
                                <span>Footer</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>Footer Left Of Odd Page:</label>
                                    <input id="footerLeftOfOddPages" />
                                </div>
                                <div class="group">
                                    <label>Footer Left Image Of Odd Page:</label>
                                    <select id="footerLeftImageOfOddPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Footer Center Of Odd Page:</label>
                                    <input id="footerCenterOfOddPages" />
                                </div>
                                <div class="group">
                                    <label>Footer Center Image Of Odd Page:</label>
                                    <select id="footerCenterImageOfOddPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Footer Right Of Odd Page:</label>
                                    <input type="text" id="footerRightOfOddPages" />
                                </div>
                                <div class="group">
                                    <label>Footer Right Image Of Odd Page:</label>
                                    <select id="footerRightImageOfOddPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="group headfooter hidden">
                            <div class="row title">
                                <span>Header</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>Header Left Of Even Pages:</label>
                                    <input id="headerLeftOfEvenPages" />
                                </div>
                                <div class="group">
                                    <label>Header Left Image Of Even Pages:</label>
                                    <select id="headerLeftImageOfEvenPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Header Center Of Even Pages:</label>
                                    <input id="headerCenterOfEvenPages" />
                                </div>
                                <div class="group">
                                    <label>Header Center Image Of Even Pages:</label>
                                    <select id="headerCenterImageOfEvenPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Header Right Of Even Pages:</label>
                                    <input type="text" id="headerRightOfEvenPages" />
                                </div>
                                <div class="group">
                                    <label>Header Right Image Of Even Pages:</label>
                                    <select id="headerRightImageOfEvenPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row title">
                                <span>Footer</span>
                            </div>
                            <div class="row hidden">
                                <div class="group">
                                    <label>Footer Left Of Even Page:</label>
                                    <input id="footerLeftOfEvenPages" />
                                </div>
                                <div class="group">
                                    <label>Footer Left Image Of Even Page:</label>
                                    <select id="footerLeftImageOfEvenPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Footer Center Of Even Page:</label>
                                    <input id="footerCenterOfEvenPages" />
                                </div>
                                <div class="group">
                                    <label>Footer Center Image Of Even Page:</label>
                                    <select id="footerCenterImageOfEvenPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                                <div class="group">
                                    <label>Footer Right Of Even Page:</label>
                                    <input type="text" id="footerRightOfEvenPages" />
                                </div>
                                <div class="group">
                                    <label>Footer Right Image Of Even Page:</label>
                                    <select id="footerRightImageOfEvenPages">
                                        <option value=""></option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                        <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row title">
                        <span>Water Mark</span>
                    </div>
                    <div class="row hidden">
                        <div class="group">
                            <label>X:</label>
                            <input type="number" id="waterMarkX" />
                        </div>
                        <div class="group">
                            <label>Y:</label>
                            <input type="number" id="waterMarkY" />
                        </div>
                        <div class="group">
                            <label>Width:</label>
                            <input type="number" id="waterMarkWidth" />
                        </div>
                        <div class="group">
                            <label>Height:</label>
                            <input type="number" id="waterMarkHeight" />
                        </div>
                        <div class="group">
                            <label>WaterMarkImage:</label>
                            <select id="waterMarkImage">
                                <option value=""></option>
                                <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/apple.jpg">Apple</option>
                                <option value="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/olympic.jpg">Olympic</option>
                            </select>
                        </div>
                        <div class="group">
                            <label>Page:</label>
                            <input type="text" id="waterMarkPage" list="list" />
                            <datalist id="list">
                                <option value="all"></option>
                                <option value="odd"></option>
                                <option value="even"></option>
                            </datalist>
                        </div>
                        <div class="group">
                            <button type="button" id="waterMarkAdd" class="waterMark-btn">Add</button>
                            <button type="button" id="waterMarkClear" class="waterMark-btn">Clear</button>
                        </div>
                        <div class="group">
                            <label>WaterMarkList:</label>
                            <select id="waterMarkList" class="custom-list-pane" size="4"></select>
                        </div>
                    </div>

                    <div>
                        <input type="button" id="btnSetPrintInfo" value="Set PrintInfo" />
                    </div>

                    <hr style="border: 1px solid white; border-bottom-color: lightgray" />
                    <div>
                        <input type="button" style="margin-bottom: 6px" value="Print" id="btnPrint" />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
